<template>
  <div id="manor">
    <div  style="display:flex;align-items: center;">
            <img class="top_img" src="@/assets/images/a8.png" style="width:35px;height:35px;margin-right:10px;"/>
            <div style="line-height: 40px;font-weight:bold;">蜂巢管理</div>
     </div>
    <el-row>
          <el-col style="text-align: right;">
            <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" @click="go_prohibit_but">
              <img class="custom_color_button1_img" src="@/assets/images/but_bg6.png"/>挂卖区间
            </el-button>
            <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" @click="go_but">
              <img class="custom_color_button1_img" src="@/assets/images/but_bg6.png"/>价值区间
            </el-button>
            <el-button type="primary" class="custom_color_button1" style="margin-bottom:10px;" @click="mtk1_but">
              <img class="custom_color_button1_img" src="@/assets/images/but_bg6.png" />标的设置
            </el-button>
          </el-col>
  </el-row>


   <!-- 渲染数据list -->
   <manor-list :manordata="manordata" @up_list_fun="list_fun"> </manor-list>


     <!-- 果种设置 -->
        <el-dialog :title="variable_name4 + '设置'" :visible.sync="mtk1"  width="800px">
            <div style="width:100%;">

              <div class="mytitle">
                  <div class="mytitle_item">基础信息</div>
              </div>
            <el-form ref="form" :model="from"   label-width="100px" style="width:100%;">
               <el-row>
                     <el-col :span="12">
                          <el-form-item label="名称">
                                <el-input v-model="from.name" placeholder="名称"></el-input>
                          </el-form-item>
                     </el-col>
                      <el-col :span="12">
                            <el-form-item label="金蜜奖励天数">
                            <el-input v-model.number="from.rebate_days_number" placeholder="天数" ></el-input>
                            </el-form-item>
                      </el-col>
                     </el-row>


                   <el-form-item label="开放时间">
                            <el-col :span="11">
                                    <el-time-picker placeholder="选择时间"   format="HH:mm" value-format="HH:mm" v-model="from.time1" style="width: 100%;"></el-time-picker>
                            </el-col>
                            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                            <el-col :span="11">
                                    <el-time-picker placeholder="选择时间"   format="HH:mm" value-format="HH:mm" v-model="from.time2" style="width: 100%;"></el-time-picker>
                            </el-col>
                    </el-form-item>


                    <el-form-item label="价值区间">
                    <el-col :span="11">
                       <el-input v-model.number="from.jz_input1" placeholder="开始价值" @blur="proving1($event)"></el-input>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                    <el-col :span="11">
                       <el-input v-model.number="from.jz_input2" placeholder="结束价值" @blur="proving1($event)"></el-input>
                    </el-col>
                   </el-form-item>

                    <div class="mytitle">
                        <div class="mytitle_item">{{ variable_name4 }}任务</div>
                    </div>

                    <el-row>
                     <el-col :span="12">
                          <el-form-item label="积分数量">
                             <el-input v-model.number="from.jf_input" placeholder="积分数量" @blur="proving1($event)"></el-input>
                         </el-form-item>
                     </el-col>
                      <el-col :span="12">
                        <el-form-item label="团队数量">
                          <el-input v-model.number="from.td_input" placeholder="团队数量" @blur="proving1($event)"></el-input>
                        </el-form-item>
                      </el-col>
                     </el-row>


                     <el-row>
                     <el-col :span="12">
                        <el-form-item label="好友数量">
                          <el-input v-model.number="from.hy_input" placeholder="好友数量" @blur="proving1($event)"></el-input>
                        </el-form-item>
                     </el-col>
                      <el-col :span="12">
                          <el-form-item label="购买次数">
                            <el-input v-model.number="from.gm_input" placeholder="购买次数" @blur="proving1($event)"></el-input>
                          </el-form-item>
                      </el-col>
                     </el-row>


                      <el-row>
                     <el-col :span="12">
                        <el-form-item label="产出小时">
                          <el-input v-model.number="from.cc_input" placeholder="产出小时" @blur="proving1($event)"></el-input>
                        </el-form-item>
                     </el-col>
                      <el-col :span="12">
                        <el-form-item label="手续费价格">
                          <el-input v-model.number="from.sxf_input" placeholder="手续费价格" @blur="proving1($event)"></el-input>
                        </el-form-item>
                      </el-col>
                     </el-row>


                      <el-row>
                     <el-col :span="12">
                        <el-form-item label="预约手续费">
                          <el-input v-model.number="from.yysxf_input" placeholder="预约手续费价格" @blur="proving1($event)"></el-input>
                        </el-form-item>
                     </el-col>
                      <el-col :span="12">
                          <el-form-item label="预约价格" >
                              <el-input  v-model.number="from.yyjg_input"  placeholder="预约价格" @blur="proving1($event)"></el-input>
                          </el-form-item>
                      </el-col>
                     </el-row>

                     <el-row>
                     <el-col :span="12">
                        <el-form-item label="普通产出比例">
                        <div style="display:flex;">
                            <el-input v-model.number="from.ptcc_input"  placeholder="请输入1-100数字" @blur="proving1($event)"></el-input>
                          </div>
                      </el-form-item>
                     </el-col>
                      <el-col :span="12">
                          <el-form-item label="VIP产出比例">
                            <div style="display:flex;">
                            <el-input v-model.number="from.vipcc_input" placeholder="请输入1-100数字"  @blur="proving1($event)"></el-input>
                              </div>
                          </el-form-item>
                      </el-col>
                     </el-row>


                      <el-row>
                     <el-col :span="12">
                        <el-form-item label="赠送经验">
                          <el-input v-model.number="from.zsjy_input" placeholder="赠送经验" @blur="proving1($event)" ></el-input>
                        </el-form-item>
                     </el-col>
                      <el-col :span="12">
                           <el-form-item label="选择范围">
                                <el-select  v-model="limits_form.pt_select_num" multiple placeholder="选择范围" style="width:100%;">
                                    <el-option  v-for="(item,index) in limits_form.py_select_data" :key="index" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                          </el-form-item>
                      </el-col>
                     </el-row>

                    <el-row>
                     <el-col :span="12">
                        <el-form-item label="拆分价值">
                          <el-input v-model="from.split_limit_price" placeholder="拆分价值"  ></el-input>
                        </el-form-item>
                     </el-col>
                      <el-col :span="12">

                      </el-col>
                     </el-row>


                     <el-row>
                     <el-col :span="8">
                        <el-form-item label="背景" >
                            <el-upload
                                  action="uploadUrl"
                                  :show-file-list="false"
                                  :before-upload="beforeupload"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form.head_img"  :src="pic_form.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>
                     </el-col>
                      <el-col :span="8">
                        <el-form-item label="主logo" >
                            <el-upload
                                  action="uploadUrl"
                                  :show-file-list="false"
                                  :before-upload="beforeupload_main"
                                  :http-request="ImgUploadSectionFile">
                                  <div class="avatar-uploader">
                                      <img v-if="pic_form_main.head_img"  :src="pic_form_main.head_img" class="avatar">
                                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                  </div>
                            </el-upload>
                         </el-form-item>
                     </el-col>
                      <el-col :span="8">
                            <el-form-item label="圆LOGO">
                              <el-upload
                                    action="uploadUrl"
                                    :show-file-list="false"
                                    :before-upload="beforeupload1"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form1.head_img"  :src="pic_form1.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                              </el-upload>
                            </el-form-item>
                      </el-col>
                     </el-row>


                    <el-row>
                      <el-col :span="12">
                          <el-form-item label="方LOGO">
                              <el-upload
                                    action="uploadUrl"
                                    :show-file-list="false"
                                    :before-upload="beforeupload2"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form2.head_img"  :src="pic_form2.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                              </el-upload>
                            </el-form-item>
                      </el-col>
                       <el-col :span="12">

                            <el-form-item label="透LOGO">
                              <el-upload
                                    action="uploadUrl"
                                    :show-file-list="false"
                                    :before-upload="beforeupload3"
                                    :http-request="ImgUploadSectionFile">
                                    <div class="avatar-uploader">
                                        <img v-if="pic_form3.head_img"  :src="pic_form3.head_img" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </div>
                              </el-upload>
                            </el-form-item>
                      </el-col>
                    </el-row>



            </el-form>

                <div style="text-align: center;width:50%;margin:auto;">
                    <el-button type="primary" style="width:80%;" @click="mtk1_but_qr">确认</el-button>
                </div>

            </div>
        </el-dialog>

   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

        <el-dialog title="用户验证" :visible.sync="user_test.user_mtk"  width="400px" >
          <el-form ref="form" :model="user_test"  label-width="100px" style="width:100%;">
                <el-form-item label="" label-width="0px">
                    <el-input v-model="user_test.password" placeholder="二级密码" ></el-input>
                </el-form-item>
                <el-form-item label="" label-width="0px" >
                    <div style="display:flex;">
                        <el-input v-model="user_test.phone" placeholder="手机验证码" style="flex:1;"></el-input>
                        <el-button class="code_but1 custom_color_button" type="primary"  @click="getCode_yz()" :disabled="user_test.disabled" style="margin-left:10px;">
                          {{ user_test.codeText }}
                        </el-button>
                    </div>
                </el-form-item>
                <div style="text-align: center;width:50%;margin:auto;margin-top:20px;">
                  <el-button type="primary" class="custom_color_button" style="width:100%;" @click="user_mtk_but">确认</el-button>
                </div>
         </el-form>
   </el-dialog>




  </div>
</template>

<script>
import ManorList from '@/view/Manor/ManorList'
export default {
  name: 'manor',
  data () {
    return {
        manordata:[{"username":"111","switch_id":0}],
        page:1,
        count:0,
        mtk1:false,
         from:{
           name:'',
           time1:'',
           time2:'',
           jz_input1:'',
           jz_input2:'',
           jf_input:'',
           td_input:'',
           hy_input:'',
           gm_input:'',
           cc_input:'',
           sxf_input:'',
           yysxf_input:'',
           yyjg_input:'',
           ptcc_input:'',
           vipcc_input:'',
           zsjy_input:'',
           split_limit_price:'',
           rebate_days_number:''
        },
         limits_form:{
            pt_select_num:[],
            py_select_data:[{"name":'1个',"id":'1'},{"name":'2个',"id":'2'},{"name":'3个',"id":'3'},{"name":'4个',"id":'4'},{"name":'5个',"id":'5'},{"name":'6个',"id":'6'},{"name":'7个',"id":'7'}
            ,{"name":'8个',"id":'8'},{"name":'9个',"id":'9'},{"name":'10个',"id":'10'}]
        },
        pic_form:{
           head_img:'',
           upfile:'',
        },
        pic_form1:{
           head_img:'',
           upfile:'',
        },
         pic_form2:{
           head_img:'',
           upfile:'',
        },
         pic_form3:{
           head_img:'',
           upfile:'',
        },
        pic_form_main:{
          head_img:'',
          upfile:'',
        },
         user_test:{  //用户判定
            user_mtk:false, //用户判定模态狂
            codeText:'获取验证码', //获取验证码字
            totalTime:60,  //获取验证码秒
            disabled:false, //禁用获取验证码
            password:'', //二级密码
            phone:'',  //验证码
        },
    }
  },
 components:{
    ManorList
  },
  created(){
       this.list_fun()
  },
  mounted (){

  },
  methods: {
      list_fun(){
          this.post("/manor/listOfData", {
              page:this.page
	        }).then(res => {
            this.count = res.result.count
            this.manordata = res.result.list

            for(let item of this.manordata) {

                item.coverList = [this.urlimg + item.cover]  //封面图片
                item.hie_grade_logoList = [this.urlimg + item.hie_grade_logo]  //主logo
                 item.level_logoList =  [this.urlimg + item.level_logo]  //等级图片

                item.square_logoList =  [this.urlimg + item.square_logo]  //方等级图片

                item.transparent_logoList =  [this.urlimg + item.transparent_logo]  //透等级图片


              }

            console.log(res)
         })
      },
     user_mtk_but(){

        this.getCode_yz_qr().then(res => {
            console.log(res)
            if(res == 1){
               this.mtk1 = true
            }
        })

    },
     mtk1_but(){
        // this.mtk1 = true
        this.user_test.user_mtk = true
        this.from={
           name:'',
           time1:'',
           time2:'',
           jz_input1:'',
           jz_input2:'',
           jf_input:'',
           td_input:'',
           hy_input:'',
           gm_input:'',
           cc_input:'',
           sxf_input:'',
           yysxf_input:'',
           yyjg_input:'',
           ptcc_input:'',
           vipcc_input:'',
           zsjy_input:'',
           split_limit_price:'',
           rebate_days_number: ''
        }
        this.pic_form.upfile = ''
        this.pic_form.head_img = ''
        this.pic_form1.upfile = ''
        this.pic_form1.head_img = ''
        this.pic_form2.upfile = ''
        this.pic_form2.head_img = ''
         this.pic_form3.upfile = ''
        this.pic_form3.head_img = ''

        this.pic_form_main.upfile = ''
        this.pic_form_main.head_img = ''
        this.limits_form.pt_select_num = []

     },
     mtk1_but_qr(){
          this.post("/manor/create", {
                   title:this.from.name,
                   start:this.from.time1,
                   end:this.from.time2,
                   order_price:this.from.yyjg_input,
                   need_kmb_direct:this.from.sxf_input,
                   need_kmb_order:this.from.yysxf_input,
                   min:this.from.jz_input1,
                   max:this.from.jz_input2,
                   day:this.from.cc_input,
                   scale:this.from.ptcc_input,
                   scale_vip:this.from.vipcc_input,
                   experience:this.from.zsjy_input,
                   experience_limit:this.from.jf_input,
                   invite_limit:this.from.td_input,
                   direct_limit:this.from.hy_input ,
                   max_buy:this.from.gm_input,
                   cover:this.pic_form.upfile,
                   level_logo:this.pic_form1.upfile,
                   square_logo:this.pic_form2.upfile,
                   transparent_logo:this.pic_form3.upfile,
                   appointmement_limit_number:this.limits_form.pt_select_num,
                   split_limit_price:this.from.split_limit_price,

                   hie_grade_logo:this.pic_form_main.upfile,
                   rebate_days_number: this.from.rebate_days_number
                }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.list_fun()
                      this.mtk1 = false
                    }else {
                    this.open1(res.message,'warning')
                }

        })
     },
     data_change1(){
        console.log(this.from.time1)
      },
      data_change2(){
        console.log(this.from.time2)
      },
      ImgUploadSectionFile(param){//图片上传
      },
       beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误
              return false
            }
            var windowURL = window.URL || window.webkitURL;
            this.pic_form.head_img=windowURL.createObjectURL(file);

            this.upimgpost("/image/uploadMultiple",file).then(res => {
              console.log(res.result.url )
               this.pic_form.upfile = res.result.url
            })

            return false;
     },
     beforeupload1(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误
              return false
            }
            var windowURL = window.URL || window.webkitURL;
            this.pic_form1.head_img=windowURL.createObjectURL(file);

             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form1.upfile = res.result.url
            })

            return false;

     },
      beforeupload2(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误
              return false
            }
            var windowURL = window.URL || window.webkitURL;
            this.pic_form2.head_img=windowURL.createObjectURL(file);

             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form2.upfile = res.result.url
            })

            return false;

     },
     beforeupload3(file){
        if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误
              return false
            }
            var windowURL = window.URL || window.webkitURL;
            this.pic_form3.head_img=windowURL.createObjectURL(file);

             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form3.upfile = res.result.url
            })

            return false;

     },
     beforeupload_main(file){
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误
              return false
            }
            var windowURL = window.URL || window.webkitURL;
            this.pic_form_main.head_img=windowURL.createObjectURL(file);

             this.upimgpost("/image/uploadMultiple",file).then(res => {
               console.log(res.result.url )
               this.pic_form_main.upfile = res.result.url
            })

            return false;
     },
     go_but(){
        this.$router.push({
          path: '/index/manorvalue',
          query: {
            // name:this.user_name,
            // id:row.uid
          }
        })
     },
     go_prohibit_but(){
        this.$router.push({
          path: '/index/prohibit',
          query: {
            // name:this.user_name,
            // id:row.uid
          }
        })
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>
.mytitle{
    height: 50px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #409EFF;
  display: block;
  margin-right: 5px;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>
